<template>
	<view class="section-header">
		<view class="header-content">
			<view class="titles">
				<text class="main-title">{{ title }}</text>
				<text class="sub-title" v-if="subtitle">{{ subtitle }}</text>
			</view>
			<view class="action" v-if="showMore" @tap="handleMore">
				<text class="more-text">{{ moreText }}</text>
				<cl-icon name="arrow-right" size="12" color="#666"></cl-icon>
			</view>
		</view>
		<view class="divider" v-if="showDivider"></view>
	</view>
</template>

<script lang="ts" setup>
interface Props {
	title: string;
	subtitle?: string;
	showMore?: boolean;
	moreText?: string;
	showDivider?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
	showMore: true,
	moreText: "更多",
	showDivider: false,
});

const emit = defineEmits<{
	more: [];
}>();

function handleMore() {
	emit("more");
}
</script>

<style lang="scss" scoped>
.section-header {
	.header-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 0 16rpx 0;
	}

	.titles {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.main-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1a1a1a;
		margin-bottom: 8rpx;
	}

	.sub-title {
		font-size: 20rpx;
		color: #999;
		letter-spacing: 2rpx;
		text-transform: uppercase;
	}

	.action {
		display: flex;
		align-items: center;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		background-color: #f5f5f5;
	}

	.more-text {
		font-size: 24rpx;
		color: #666;
		margin-right: 8rpx;
	}

	.divider {
		height: 1rpx;
		background-color: #eee;
		margin-top: 16rpx;
	}
}
</style>
